import React, {useEffect ,useState,forwardRef,useImperativeHandle} from 'react'
// import UserOrg from '@/api/userorg'
import $axios from '@/utils/axios'
import { Modal,Tree, message} from 'antd'
import { TreeNode } from 'rc-tree'
import {


  TeamOutlined,
  UserOutlined
} from '@ant-design/icons';
import './index.less'
const ChooseUserGroup = (props,refs) => {
  // const [loading, setLoading] = useState<boolean>(false)
  //显示隐藏弹窗
  const [isModalVisible, setIsModalVisible] = useState(false);
  
   //显示隐藏树
   const [isTreeVisible, setIsTreeVisible] = useState(false);
  //菜单树
  const [treeData,setTreeData] = useState<any[]>([]);
  //获取菜单树
  const getTree = ()=>{
    $axios.get('/dm/api/baseinfo/region/list/tree').then((res)=>{
      let data1 = [
        {
          regionName:'行政区域',
          regionCode:'0',
          disabled:true,
          children:res.data
        }
      ]
      let data = handledata(data1);
      setTreeData(data);
      setIsTreeVisible(true);
    });
  }
  //  let fieldNames = { title: 'menuname', key: 'menuid', children: 'children' };
  const handledata = (data)=>{
    data.map((e,i)=>{
      data[i]['title'] = e['regionName']
      data[i]['key'] = e['regionCode'];
      if(e['children']&&e['children'].length>0){
        e['children'] = handledata(e['children']);
      }
      return 1
    })

    return data;
  }
  //选中
  const [checkedAr,setCheckedArr] = useState([]);

  //选中
  const [checkedObjArr,setCheckedObjArr] = useState([]);
  //  let fieldNames = { title: 'menuname', key: 'menuid', children: 'children' };
  // const handledata = (data)=>{
  //   data.map((e,i)=>{
  //     if(e['children']&&e['children'].length>0){
  //       e['children'] = handledata(e['children']);
  //     }
  //   })

  //   return data;
  // }
  useEffect(()=>{
    getTree();
  },[])
  useImperativeHandle(refs, () => ({
    init: (id) => {
      showModal();
    }
  }))
 
  //显示弹窗
  const showModal = () => {
    setIsModalVisible(true);
    setIsTreeVisible(true);
  };
  //确定
  const handleOk = () => {
    if(checkedAr.length===0){
      message.error('最少选择一个');
      return;
    }
    handleCancel();
  };
  //取消
  const handleCancel = () => {
    setIsModalVisible(false);
    setIsTreeVisible(false);
    
    props.callback&&checkedObjArr.length>0&&props.callback(checkedObjArr);
    setCheckedArr([]);
    setCheckedObjArr([]);
  };
  const onSelect = (selectedKeys: React.Key[], info: any) => {
    if(selectedKeys.length>0){
      setCheckedArr(selectedKeys);
      setCheckedObjArr([{
          'id':info['node']['key'],
          'name':info['node']['title'],
      }])
    }
  };

  // const onCheck = (checkedKeys, info: any) => {
  //   console.log('onCheck', checkedKeys, info);
  // };
  const renderTree = (data)=>{
    let treeNodeArr = [];
    data.map((e)=>{
      treeNodeArr.push(<TreeNode disabled={e['disabled']?e['disabled']:false} key={e['key']} title={e['title']}>
        {
          e['children']&&renderTree(e['children'])
        }
      </TreeNode>);
      return 1
    })
    return treeNodeArr;
  }
  return <Modal 
    title="选择行政区域" 
    visible={isModalVisible} 
    onOk={handleOk} 
    onCancel={handleCancel}
    width={600}
    className="left_tree"
    centered={true}
    destroyOnClose={true}
    bodyStyle={{
      height: window.innerHeight - 250,
      overflowY:'auto'
    }}
    >
     <Tree
        onSelect={onSelect}
        selectedKeys={checkedAr}
        showIcon={true}
        defaultExpandedKeys={['0']}
      >
        {
          renderTree(treeData)
        }
      </Tree>
</Modal>
}

const ChooseUserGroupCom = forwardRef(ChooseUserGroup);
export default ChooseUserGroupCom